<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<div class="container">
    <form th:if="${#strings.isEmpty(key)}" class="form-horizontal" role="form">
        <div class="row text-center">
            <div class="page-header">
                <h3>功能暂未开放</h3>
            </div>
        </div>
    </form>

    <form th:if="${not #strings.isEmpty(key)}" class="form-horizontal" role="form">
        <div class="row text-center">
            <div class="page-header">
                <h3>授权许可<img th:if="${productInfo?.products?.size() gt 0}" draggable="false" title="授权成功" width="28px" height="28px" th:src="@{'/img/check-circle.png'}"></h3>
            </div>
        </div>
        <div class="form-group">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th></th>
                    <th>产品名称</th>
                    <th>有效期限</th>
                </tr>
                </thead>
                <tbody>
                <tr th:id="${p?.name}" th:each="p,state : ${productInfo?.products}">
                    <td>[[${state.index+1}]]</td>
                    <!-- 有效期 -->
                    <td th:if="${#dates.createNow()?.time} < ${p?.effectiveTime} and ${p?.effectiveTime} - 1296000000 > ${#dates.createNow()?.time}">[[${p?.name}]]&nbsp;<img draggable="false" width="20px" height="20px" th:src="@{'/img/check.png'}"></td>
                    <!-- 即将过期 -->
                    <td th:if="${#dates.createNow()?.time} < ${p?.effectiveTime} and ${p?.effectiveTime} - 1296000000 <= ${#dates.createNow()?.time}">[[${p?.name}]]&nbsp;<img draggable="false" width="20px" height="20px" title="即将过期, 请联系售前客服续期" th:src="@{'/img/remind.png'}"></td>
                    <!-- 已过期 -->
                    <td th:if="${#dates.createNow()?.time} > ${p?.effectiveTime}">[[${p?.name}]]&nbsp;<img draggable="false" width="20px" height="20px" title="已过期, 请联系售前客服续期" th:src="@{'/img/warning.png'}"></td>
                    <td th:text="${#dates.format(p?.effectiveTime, 'yyyy-MM-dd HH:mm:ss')}"/>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">1.复制授权KEY（请发送给 <a href="javascript:;" id="myService" class="text-success"><span class='fa fa-wechat'></span>售前客服</a> 帮您生成License文件）</h3>
            </div>
            <div class="panel-body">
                <div class="input-group">
                    <input id="licenseKey" type="text" class="form-control text-primary" readonly="readonly" th:value="${key}">
                    <span class="input-group-btn"><button id="copyBtn" class="btn btn-default" type="button" th:title="复制授权KEY"><i class="fa fa-copy"></i>&nbsp;复制</button></span>
                </div>
                <div id="qrcode" class="hidden"></div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">2.上传License文件</h3>
            </div>
            <div class="panel-body">
                <div class="file-loading">
                    <input id="fileLicense" type="file" name="files" multiple="multiple"/>
                </div>
            </div>
        </div>

    </form>
</div>

<script th:src="@{/js/license/license.js}"></script>
</html>